<!--
 * @Description: 实时监测
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 王恺天 2804952352@qq.com
 * @LastEditTime: 2025-09-28 10:54:10
-->
<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class="filter-tree" :data="EngData" :props="defaultProps" :filter-node-method="filterNode"
            ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="table">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="tsp" name="tsp"></el-tab-pane>
            <el-tab-pane label="pm10" name="pm10"></el-tab-pane>
            <el-tab-pane label="pm2.5" name="pm2.5"></el-tab-pane>
            <el-tab-pane label="温度" name="温度"></el-tab-pane>
            <el-tab-pane label="湿度" name="湿度"></el-tab-pane>
            <div ref="container" style="height: 80%;width: 90%;margin-top: 30px;"></div>
            <!-- {{ ed }} -->
            <div ref="RealTime" style="height:150px;margin-top:10px"></div>
          </el-tabs>
        </div>
      </el-col>
    </el-row>


  </div>
</template>
<script>
//2.引入折线图构造函数
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';

export default {

  data() {
    return {
      params: {
        page: 1,
        pageSize: 100,
      },
      activeName: "",
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: '',
      TempData: [],
      EngData: [],
      line: null

    }

  },
  computed: {
    ...mapState(['ed'])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
      this.$refs.table.filter(val);
    },
    ed: {
      handler(n, o) {
        //根据设备信息重新查询数据 重新渲染图表
        this.params.engineer_id = n.engineer_id;
        this.params.device_id = n.device_id;
        this.getTempData();//重新查询数字
        //根据重新获取的数据重新渲染图表
        this.area.changeData(this.tempData);
      },
      deep: true
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getTime() {
      let res = await get('/monitor/pageQueryTodayData', this.params);
      console.log(res, '-----');
    },
    // 封装方法获取工程设备树 
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, '88888');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      // data是树形结构数据 
      if (!value) return true;
      // value输入框输入的值 
      // 返回就是包含输入框关键字的label(节点)  
      return data.name.indexOf(value) !== -1;
    },
    loadArea() {
      this.area = new Area(this.$refs.RealTime, {
        data: this.tempData,
        xField: 'insert_time',
        yField: 'tsp',
        tooltip: {
          showMarkers: true,
          domStyles: {
            "g2-tooltip": {
              background: '#147',
              color: "white",
              fontSize: 20
            }
          }
        },
        xAxis: {
          range: [0, 1],
          tickCount: 5
        },
        areaStyle: () => {
          return {
            fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
          };
        },
      });

      this.area.render();
    },

    // 封装方法获取后端接口的实时数据
    async getTempData() {

      let res = await get('/dashboard/pageQueryTodayData', this.params);
      console.log(res, "获取相应");
      let temp = [];
      // 将后端获取的数字

      res.data.list.forEach((item, index, arr) => {
        arr[0].temperature = 15.4,
          // item表示数组的每一项

          item.insert_time = moment(item.insert_time).format("HH:mm");
        if (index % 10 == 0) {
          temp.push(arr[index])
        }
      });
      this.tempData = temp;

    },
  },

  //最早获取dom元素的生命周期
  async mounted() {
    await this.getTempData();
    this.loadArea();
  },
  created() {
    this.getEngDevData();
    this.getTime();
  },



}
</script>

<style lang="less" scoped></style>